// 出车账单填写
<template>
  <div class="oilInlet-container">
    <van-nav-bar
      class="app-nav-bar"
      title="出车账单填写"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form class="title-box" @submit="onSubmit">
      <van-field
        v-model="form.car_number"
        type="text"
        readonly
        name="车牌号"
        label="车牌号"
        placeholder="请填写车牌号"
        @click="show = true"
      />
      <van-action-sheet cancel-text="取消" close-on-click-action v-model="show" :actions="actions" @select="onSelect" />
      <van-field
        v-model="form.driver"
        type="text"
        name="司机姓名"
        label="司机姓名"
        placeholder="请填写司机姓名"
        :rules="[{ required: true, message: '请填写司机姓名' }]"
      />
      <van-field
        v-model="form.salary"
        type="number"
        name="司机工资"
        label="司机工资"
        placeholder="请填写司机工资"
        :rules="[{ required: true, message: '请填写司机工资' }]"
      />
      <van-field
        v-model="autoProfit"
        readonly
        type="number"
        name="出车盈利"
        label="出车盈利"
        placeholder="填写完成自动计算"
      />
    </van-form>
    <van-tabs type="card" v-model="active" @disabled="onClickDisabled">
      <van-tab title="去时" name="a">
        <van-form class="form-box" @submit="onSubmit">
          <van-field
            readonly
            clickable
            name="calendar"
            :value="form.leave_date"
            label="出车日期"
            placeholder="点击选择出车日期"
            :rules="[{ required: true, message: '请填写出车日期' }]"
            @click="showCalendar = true"
          />
          <van-calendar
            :min-date="minDate"
            :max-date="maxDate"
            v-model="showCalendar"
            @confirm="onConfirm"
          />
          <van-field
            v-model="form.leave_loading_address"
            type="text"
            name="装货地址"
            label="装货地址"
            placeholder="请填写装货地址"
            :rules="[{ required: true, message: '请填写装货地址' }]"
          />
          <van-field
            v-model="form.leave_unloading_address"
            type="text"
            name="卸货地址"
            label="卸货地址"
            placeholder="请填写卸货地址"
            :rules="[{ required: true, message: '请填写卸货地址' }]"
          />
          <van-field
            v-model="form.leave_tonnage"
            type="number"
            name="吨位数"
            label="吨位数"
            placeholder="请填写吨位数"
            :rules="[{ required: true, message: '请填写吨位数' }]"
          />
          <van-field
            v-model="form.leave_unit_price"
            type="number"
            name="含税单价"
            label="含税单价"
            placeholder="请填写含税单价"
            :rules="[{ required: true, message: '请填写含税单价' }]"
          />
          <van-field
            v-model="leave_total_freight"
            type="number"
            readonly
            name="总运费"
            label="总运费"
            placeholder="自动计算（吨位数*含税单价）"
          />
          <van-field
            v-model="form.leave_high_speed"
            type="number"
            name="高速费"
            label="高速费"
            placeholder="请填写高速费"
            :rules="[{ required: true, message: '请填写高速费' }]"
          />
          <van-field
            v-model="form.leave_loss"
            type="number"
            name="损耗"
            label="损耗"
            placeholder="请填写损耗"
            :rules="[{ required: true, message: '请填写损耗' }]"
          />
          <van-field
            v-model="autoProfitLeave"
            readonly
            type="number"
            name="去时盈利"
            label="去时盈利"
            placeholder="填写完成自动计算"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >下一步</van-button
            >
          </div>
        </van-form>
      </van-tab>
      <van-tab title="回时" name="b" :disabled='back'>
        <van-form class="form-box" @submit="onAdd">
          <van-field
            readonly
            clickable
            name="calendar"
            :value="form.back_date"
            label="回车日期"
            placeholder="点击选择回车日期"
            :rules="[{ required: true, message: '请填写回车日期' }]"
            @click="showCalendar = true"
          />
          <van-calendar
            :min-date="minDate"
            :max-date="maxDate"
            v-model="showCalendar"
            @confirm="onConfirmBack"
          />
          <van-field
            v-model="form.back_loading_address"
            type="text"
            name="装货地址"
            label="装货地址"
            placeholder="请填写装货地址"
            :rules="[{ required: true, message: '请填写装货地址' }]"
          />
          <van-field
            v-model="form.back_unloading_address"
            type="text"
            name="卸货地址"
            label="卸货地址"
            placeholder="请填写卸货地址"
            :rules="[{ required: true, message: '请填写卸货地址' }]"
          />
          <van-field
            v-model="form.back_tonnage"
            type="number"
            name="吨位数"
            label="吨位数"
            placeholder="请填写吨位数"
            :rules="[{ required: true, message: '请填写吨位数' }]"
          />
          <van-field
            v-model="form.back_unit_price"
            type="number"
            name="含税单价"
            label="含税单价"
            placeholder="请填写含税单价"
            :rules="[{ required: true, message: '请填写含税单价' }]"
          />
          <van-field
            v-model="back_total_freight"
            readonly
            type="number"
            name="总运费"
            label="总运费"
            placeholder="自动计算（吨位数*含税单价）"
          />
          <van-field
            v-model="form.back_high_speed"
            type="number"
            name="高速费"
            label="高速费"
            placeholder="请填写高速费"
            :rules="[{ required: true, message: '请填写高速费' }]"
          />
          <van-field
            v-model="form.back_loss"
            type="number"
            name="损耗"
            label="损耗"
            placeholder="请填写损耗"
            :rules="[{ required: true, message: '请填写损耗' }]"
          />
          <van-field
            v-model="autoProfitBack"
            readonly
            type="number"
            name="回时盈利"
            label="回时盈利"
            placeholder="填写完成自动计算"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { addIssueForm } from '@/api/issue'
export default {
  name: 'oilInletIndex',
  components: {},
  props: {},
  data () {
    return {
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2035, 0, 31),
      form: {
        driver: '', // 司机名称
        car_number: null, // 车牌号
        salary: null, // 司机工资
        leave_date: '', // 出车日期
        leave_time_stamp: null, // 出车时间戳
        leave_loading_address: null, // 装货地址
        leave_unloading_address: null, // 卸货地址
        leave_tonnage: null, // 吨位数
        leave_unit_price: null, // 含税单价
        leave_total_freight: null, // 总运费
        leave_high_speed: null, // 高速费
        leave_loss: null, // 损耗
        leave_profit: null, // 去时盈利
        back_date: '', // 回车日期
        back_time_stamp: null, // 回车时间戳
        back_loading_address: null, // 装货地址
        back_unloading_address: null, // 卸货地址
        back_tonnage: null, // 吨位数
        back_unit_price: null, // 含税单价
        back_total_freight: null, // 总运费
        back_high_speed: null, // 高速费
        back_loss: null, // 损耗
        back_profit: null, // 去时盈利
        profit: null
      },
      actions: [{ name: '冀ADJ656' }, { name: '冀A9638W' }, { name: '冀A758AF' }, { name: '冀AL7806' }, { name: '冀AFV191' }, { name: '冀A644P2' }, { name: '冀A7Z939' }, { name: '冀A976WU' }, { name: '冀A483G3' }, { name: '冀AKN117' }, { name: '冀AU8537' }, { name: '冀ABD571' }, { name: '冀AKF385' }, { name: '冀A35Q54' }, { name: '冀A5285C' }, { name: '冀A8U871' }, { name: '冀A54U11' }, { name: '冀A589AM' }, { name: '冀A552AM' }, { name: '冀A247CF' }, { name: '冀A79D74' }, { name: '冀ABM247' }, { name: '冀AXJ901' }, { name: '冀A8189V' }, { name: '冀A477G3' }, { name: '冀A8535V' }, { name: '冀A8608Z' }, { name: '冀AKX857' }, { name: '冀ALB477' }],
      active: 'a',
      showCalendar: false,
      list: [],
      gotoList: [],
      loading: false,
      finished: false,
      refreshing: false,
      show: false,
      back: true
    }
  },
  computed: {
    autoProfitLeave: { // 计算盈利
      set: function (v) {
        this.form.leave_profit = v
      },
      get: function () {
        return parseFloat(this.form.leave_tonnage * this.form.leave_unit_price - this.form.leave_high_speed - this.form.leave_loss).toFixed(2) === '0.00' ? null : parseFloat(this.form.leave_tonnage * this.form.leave_unit_price - this.form.leave_high_speed - this.form.leave_loss).toFixed(2)
      }
    },
    autoProfitBack: { // 计算盈利
      set: function (v) {
        this.form.back_profit = v
      },
      get: function () {
        return parseFloat(this.form.back_tonnage * this.form.back_unit_price - this.form.back_high_speed - this.form.back_loss).toFixed(2) === '0.00' ? null : parseFloat(this.form.back_tonnage * this.form.back_unit_price - this.form.back_high_speed - this.form.back_loss).toFixed(2)
      }
    },
    autoProfit: { // 计算盈利
      set: function (v) {
        this.form.profit = v
      },
      get: function () {
        return parseFloat(Number(this.autoProfitLeave) + Number(this.autoProfitBack) - this.form.salary).toFixed(2) === '0.00' ? null : parseFloat(Number(this.autoProfitLeave) + Number(this.autoProfitBack) - this.form.salary).toFixed(2)
      }
    },
    leave_total_freight: {
      set: function (v) {
        this.form.leave_total_freight = v
      },
      get: function () {
        return parseFloat(this.form.leave_tonnage * this.form.leave_unit_price).toFixed(2) === '0.00' ? null : parseFloat(this.form.leave_tonnage * this.form.leave_unit_price).toFixed(2)
      }
    },
    back_total_freight: {
      set: function (v) {
        this.form.back_total_freight = v
      },
      get: function () {
        return parseFloat(this.form.back_tonnage * this.form.back_unit_price).toFixed(2) === '0.00' ? null : parseFloat(this.form.back_tonnage * this.form.back_unit_price).toFixed(2)
      }
    }
  },
  watch: {},
  created () {},
  mounted () {
    // this.getInfo()
  },
  methods: {
    onAdd (values) {
      console.log('onAdd', values)
      this.form.leave_total_freight = this.leave_total_freight
      this.form.back_total_freight = this.back_total_freight
      this.form.leave_profit = this.autoProfitLeave
      this.form.back_profit = this.autoProfitBack
      this.form.profit = this.autoProfit
      console.log('form', this.form)
      addIssueForm(this.form).then(res => {
        console.log('填写出车信息', res)
        if (res.data.errno === 1000) {
          this.$toast.success('提交成功')
          setTimeout(() => {
            window.location.reload()
          }, 1000)
        }
      }).catch((err) => {
        console.log('addOilInfo err', err)
        this.$toast.fail('提交失败')
      })
    },
    onSubmit (values) {
      console.log('submit', values)
      this.back = false
      setTimeout(() => {
        this.active = 'b'
      })
    },
    onConfirm (date) {
      console.log('日期', new Date(date))
      console.log('时间戳', new Date(date).getTime())
      this.form.leave_date = `${date.getYear() + 1900}/${
        date.getMonth() + 1
      }/${date.getDate()}`
      this.form.leave_time_stamp = new Date(date).getTime()
      this.showCalendar = false
    },
    onConfirmBack (date) {
      console.log('日期', new Date(date))
      console.log('时间戳', new Date(date).getTime())
      this.form.back_date = `${date.getYear() + 1900}/${
        date.getMonth() + 1
      }/${date.getDate()}`
      this.form.back_time_stamp = new Date(date).getTime()
      this.showCalendar = false
    },
    onSelect (item) { // 内部车辆选择器
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // console.log(item)
      this.form.car_number = item.name
      this.show = false
      // Toast(item.name)
    },
    onClickDisabled (name, title) {
      console.log(name, title)
      this.$toast('请先填写去时信息')
    }
  }
}
</script>

<style scoped lang="scss">
.form-box {
  padding: 0 10px;
}
.van-field {
  border-radius: 10px;
  margin: 16px 0;
  // background-color: rgba(102, 137, 253, 0.9);
  // height: 45px;
}
.tab_field {
  padding: 0 10px;
}
// .van-button--normal {
//     padding: 0 0.4rem;
//     font-size: 0.37333rem;
//     border-radius: 10px;
// }
.field-btn {
  border-radius: 10px;
  background-color: rgba(25, 137, 250, 0.7);
}

.van-cell__label {
  margin-top: 0.10667rem;
  color: rgb(78, 61, 61);
  font-size: 16px;
  line-height: 0.48rem;
}

.title-box .van-field {
  border-radius: 0;
  margin: 0 0 10px 0;
}
</style>
